<template>
	<!-- 会员中心 -->
	<!--pages/memberCenter/memberCenter.wxml-->
	<view class="member-index-wrapper">
		<!-- 会员信息 -->
		<view class="member-msg">
			<view class="member-container">
				<image src="/static/images/icon/memberLevelBg.png"
					:class="'m-bg ' + (isSmallScreen?'small-screen':'')"></image>
				<view class="member-info">
					<view class="member-info-top">
						<view class="user-info">
							<image class="user-avatar"
								:src="userInfo.pic?userInfo.pic:'/static/images/icon/head04.png'"></image>
							<view class="user-nickname">
								<view class="nickname">{{memberInfo.nickName}}</view>
							</view>
						</view>
						<view class="user-level">
							<text v-if="memberInfo.userLevel">{{memberInfo.userLevel.levelName}}</text>
						</view>
					</view>

					<view class="member-info-bottom">
						<view class="vip-level-progress">
							<view class="level-tips">
								<text v-if="currentGrowthFull">{{i18n.currentGrowthFull}}</text>
								<text v-else>{{i18n.upgradeStillNeeded}} {{ upgradeNeedGrowth }}
									{{i18n.growthValue}}</text>
								<progress class="level-progress" :percent="percent" backgroundColor="#feeee0"
									activeColor="#9e642e" active="true" border-radius="8" stroke-width="4"></progress>
								<view class="level-span">
									<text v-if="memberInfo.userLevel">{{memberInfo.userLevel.levelName}}</text>
									<text>{{memberInfo.nextLevelName}}</text>
								</view>
							</view>
							<view class="level-text" v-if="memberInfo.nextGrowth">{{i18n.growthValue}}
								{{memberInfo.growth}} / {{memberInfo.nextGrowth}}
							</view>
							<view class="level-text" v-else>{{i18n.growthValue}} {{memberInfo.growth}}</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- /会员信息 -->

		<!-- 会员成长说明 -->
		<view class="member-growth" v-if="memberInfo.levelType!=1">
			<view class="member-tit">
				<view class="text">{{i18n.memberGrowthDescription}}</view>
			</view>
			<!-- 成长值 -->
			<view class="growth-value">
				<view class="value-table">
					<view class="tr">
						<view class="td-left th">{{i18n.grade}}</view>
						<view class="td-right th">{{i18n.correspondingGrowthValue}}</view>
					</view>
					<view class="tr" v-for="(item, id) in userLevels" :key="id">
						<view class="td-left">{{item.levelName}}</view>
						<view class="td-right">{{item.needGrowth}}</view>
					</view>
				</view>

			</view>
			<!-- 成长值 -->

		</view>
		<!-- /会员成长说明 -->


		<!-- vip专属权益 -->
		<view class="member-growth member-rights">
			<view class="member-tit">
				<view class="text">{{i18n.exclusiveMembers}}</view>
				<text class="more-rights" @tap="toogleShowRights">{{i18n.moreInterests}}></text>
			</view>
			<view class="rights-container" v-if="memberInfo.userLevel">
				<block v-for="(right, rightsId) in memberInfo.userLevel.userRights" :key="rightsId">
					<view class="right-item">
						<view class="right-lf">
							<image mode="widthFix" :src="right.icon"></image>
						</view>
						<view class="right-rt">
							<view class="right-tit">{{right.rightsName}}</view>
							<view class="right-desc">{{right.description}}</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<!-- /vip专属权益 -->


		<!-- 弹窗Swiper -->
		<view class="swiperPop" v-if="showRights">
			<view class="mask" v-if="showRights" @tap="toogleShowRights">
				<view class="close">
					<image src="/static/images/icon/close-white.png"></image>
				</view>
			</view>
			<swiper indicator-dots indicator-active-color="#fff" indicator-color="rgba(255,255,255,.2)"
				:duration="duration" next-margin="20rpx" previous-margin="50rpx">
				<block v-for="(levelItem, id) in userLevels" :key="id">
					<swiper-item class="member-item">
						<view class="swiper-box">
							<view class="top-bg">
								<image class="member-bg" :src="levelItem.img"></image>
								<view class="top-con">
									<view class="member-title">{{levelItem.levelName}}</view>
									<text class="member-desc">{{levelItem.userRights.length}} {{i18n.itemXiang}}
										{{i18n.exclusiveMembers}}</text>
								</view>
							</view>
							<view class="rights-item-con">
								<block v-for="(right, rightsId) in levelItem.userRights" :key="rightsId">
									<view class="rights-item">
										<view class="rights-img">
											<image mode="heightFix" :src="right.icon"></image>
										</view>
										<view class="rights-tit">{{right.rightsName}}</view>
										<view class="rights-desc">{{right.description}}</view>
									</view>
								</block>
							</view>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- /弹窗Swiper -->

	</view>
</template>

<script module="wxs" lang="wxs" src="../../../wxs/number.wxs"></script>

<script>
	// pages/memberCenter/memberCenter.js
	var http = require("../../../utils/http");
	export default {
		data() {
			return {
				interval: 2000,
				duration: 1000,
				showRights: false,
				memberInfo: {},
				userInfo: {},
				userLevels: [],
				percent: 0,
				isSmallScreen: false, // 是否小屏幕(高度低于568: 如iphone5)
				currentGrowthFull: false, // 当前成长值已满
				upgradeNeedGrowth: 0 // 升级仍需成长值
			};
		},

		computed: {
			i18n() {
				return this.$t('index')
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			var ths = this; // 获取设备信息, 调整背景头图高度
			wx.getSystemInfo({
				success: function(res) {
					if (res.screenHeight <= 568) {
						ths.setData({
							isSmallScreen: true
						});
					}
				},
				fail: function(res) {},
				complete: function(res) {}
			});
			// 获取用户信息
			this.setData({
				userInfo: wx.getStorageSync('loginResult')
			});
			// 获取当前会员信息
			this.getMemberInfo();
		},
		methods: {
			/**
			 * 跳转
			 */
			routeTo(e) {
				const path = e.currentTarget.dataset.path;

				if (path == 'scoreDet') {
					uni.navigateTo({
						url: '/pages/integralDetail/integralDetail'
					});
				}
			},

			/**
			 * 获取用户当前会员信息
			 */
			getMemberInfo() {
				uni.showLoading();
				var params = {
					url: '/p/score/scoreLevel/page',
					method: 'GET',
					data: {
						levelType: 0
					},
					callBack: res => {
						uni.hideLoading()
						const percent = res.nextGrowth > 0 ? res.growth / res.nextGrowth : (res.nextGrowth === 0 &&
							res.growth === 0) || (res.growth > res.nextGrowth) ? 100 : 0
						const currentGrowthFull = res.growth >= res.nextGrowth
						const upgradeNeedGrowth = res.nextGrowth ? res.nextGrowth - res.growth : 0
						this.setData({
							memberInfo: res,
							userLevels: res.userLevels,
							percent: percent,
							currentGrowthFull: currentGrowthFull,
							upgradeNeedGrowth: upgradeNeedGrowth
						});
					}
				};
				http.request(params);
			},

			/**
			 * 显/隐更多权益
			 */
			toogleShowRights() {
				this.setData({
					showRights: !this.showRights
				});
			}

		}
	};
</script>
<style lang="scss">
	/* pages/memberCenter/memberCenter.wxss */

	page {
		height: 100%;
		width: 100%;
	}

	.member-index-wrapper {
		position: relative;

		.member-msg {
			/* 会员信息 */

			.member-container {
				position: relative;
				width: 750rpx;
				height: 450rpx;

				.m-bg {
					width: 100%;
					position: absolute;
					left: 0;
					top: 0;
					z-index: -1;
				}

				.small-screen {
					height: 480rpx;
				}

				.member-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 15% 8% 5% 8%;
					height: 100%;
					box-sizing: border-box;
					color: #fff;


					.member-info-top {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 40rpx;

						.user-info {
							display: flex;
							max-width: 70%;

							.user-avatar {
								border-radius: 50%;
								margin-right: 20rpx;
								width: 80rpx;
								height: 80rpx;
							}

							.user-nickname {
								flex: 1;
								display: flex;
								align-items: center;

								.nickname {
									font-size: 28rpx;
									font-weight: 600;
									overflow: hidden;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									text-overflow: ellipsis;
									word-break: break-all;
								}
							}
						}

						.user-level {
							font-size: 40rpx;
							font-family: FZXiaoBiaoSong-B05S;
							font-weight: 800;
						}
					}

					.member-info-bottom {
						padding-bottom: 20rpx;

						.vip-level-progress {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 26rpx;

							.level-tips {
								flex: 6;
								margin-right: 30rpx;
								align-self: center;
								font-size: 24rpx;

								.level-progress {
									margin: 6rpx 0;
								}

								.level-span {
									display: flex;
									justify-content: space-between;
									font-weight: bold;
								}
							}
						}
					}
				}
			}
		}

		/* 会员信息 end */

		.member-growth {
			padding: 30rpx;
			padding-bottom: 0;
			box-sizing: border-box;
			margin-top: 20rpx;


			.member-tit {
				display: flex;
				align-items: center;
				margin: 20rpx 0;

				.text {
					flex: 1;
					font-size: 32rpx;
					font-weight: 600;
					position: relative;
					padding-left: 22rpx;

					&::before {
						position: absolute;
						left: 0;
						top: 15%;
						display: block;
						width: 6rpx;
						height: 70%;
						content: " ";
						background: #e43130;
						border-radius: 6rpx;
					}
				}
			}


			/* 等级表格 */

			.growth-value {
				padding: 20rpx 40rpx;
				margin-bottom: 20rpx;


				.value-table .tr {
					display: flex;
				}

				.td-left,
				.td-right {
					display: inline-block;
					padding: 0 6rpx;
					line-height: 2.5em;
					font-size: 28rpx;
					text-align: left;
					background: #fcf8f7;
					text-align: center;
					word-break: break-all;
					/* text-indent: 1.5em; */
				}

				.th {
					background: #ffefe5;
					font-weight: bold;
				}

				.td-left {
					width: 40%;
					margin-right: 0.8%;
				}

				.td-right {
					width: 59%;
				}
			}
		}

		.member-rights {
			justify-content: space-between;
			padding-top: 0;
			margin: 60rpx 0 40rpx 0;


			.more-rights {
				font-size: 24rpx;
				color: #999;
			}

			.rights-container {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.right-item {
				display: flex;
				width: 340rpx;
				height: 160rpx;
				justify-content: center;
				align-items: center;
				background: #f8f8f8;
				margin-bottom: 10rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}

			.right-lf {
				display: flex;
				align-items: center;
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.right-rt {
				margin-left: 20rpx;
				flex: 1;
			}

			.right-rt .right-tit {
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}

			.right-rt .right-desc {
				font-size: 22rpx;
				color: #999;
			}
		}

		/* swiper弹窗 */

		.swiperPop {
			position: relative;
			width: 100%;
			height: 100%;
			background: #eee;

			.mask {
				position: fixed;
				top: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.5);
				z-index: 999;
				width: 100%;
				height: 100%;
			}

			swiper {
				position: fixed;
				top: 20%;
				width: 100%;
				height: 78%;
				z-index: 1000;
			}

			.close {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 16%;
				right: 8%;
			}

			.close>image {
				width: 100%;
				height: 100%;
				display: block;
			}

			.swiperPop .swiper-box {
				width: 95%;
				display: flex;
			}

			.top-bg {
				width: 100%;
				height: 180rpx;
			}

			.top-bg .member-bg {
				width: 100%;
				height: 100%;
				position: relative;
				border-radius: 14rpx;
				display: block;
			}

			.top-con {
				position: absolute;
				left: 0;
				top: 0;
				color: #fff;
				padding: 40rpx;
				box-sizing: border-box;
				font-size: 26rpx;
			}

			.top-con .member-title {
				margin-bottom: 10rpx;
				font-size: 32rpx;
				font-weight: 600;
			}

			.top-bg .member-level {
				position: absolute;
				top: 10rpx;
				right: -20rpx;
				width: 50%;
				opacity: 0.2;
			}

			.rights-item-con {
				width: 95%;
				height: 75%;
				max-height: 75%;
				overflow: scroll;
				background-color: #fff;
				position: absolute;
				top: 160rpx;
				left: 0;
				border-radius: 14rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				flex-wrap: wrap;
				padding: 40rpx;
				box-sizing: border-box;
			}

			.rights-item-con::after {
				content: '';
				width: 30%;
				padding: 0 15rpx;
				box-sizing: border-box;
			}

			.rights-item {
				width: 30% !important;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 40rpx;
			}

			.rights-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.rights-img image {
				width: 100%;
				height: 100%;
				display: block;
			}

			.rights-tit {
				font-size: 28rpx;
				margin: 25rpx 0 15rpx 0;
			}

			.rights-desc {
				font-size: 22rpx;
				color: #999;
				text-align: center;
			}
		}
	}
</style>
